<template>
  <!-- 添加或修改rooms对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="addVisible"
    width="500px"
    :before-close="cancel"
    append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="buildingId" label="选择楼宇">
        <el-select v-model="form.buildingId" placeholder="请选择楼宇" clearable>
          <el-option
            v-for="item in buildingOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="unitId" label="选择单元">
        <el-select v-model="form.unitId" placeholder="请选择单元" clearable>
          <el-option
            v-for="item in nowUnitsOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="选择楼层" prop="floorId">
        <el-select v-model="form.floorId" placeholder="请选择楼层" clearable>
          <el-option
            v-for="item in nowFloorOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="purposeId" label="房间用途">
        <el-select v-model="form.purposeId" placeholder="请选择房间用途" clearable >
          <el-option
            v-for="dict in dict.type.community_rooms_purpose"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="建筑面积" prop="area">
        <el-input v-model="form.area" placeholder="请输入建筑面积" />
      </el-form-item>
      <el-form-item label="使用面积" prop="userArea">
        <el-input v-model="form.userArea" placeholder="请输入使用面积" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRooms, updateRooms } from "@/api/system/rooms";
import {buildingList, listBuilding} from "../../../api/system/building";
import {listUnit, unitList} from "../../../api/system/unit";
import {floorsList} from "../../../api/system/floors";
export default {
  name: "addAndUpdate",
  dicts: [`community_rooms_purpose`],
  props:{
    title:{
      type:String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    },
    form: {
      type: Object,
      required: true
    },
    getList: {
      type:Function,
      required: true
    },
    reset:{
      type: Function,
      required: true
    }
  },
  data(){
    return{
      addVisible: false,
      queryParams: {},
      // 表单校验
      rules: {
        floorId: [
          { required: true, message: "楼层不能为空", trigger: "blur" }
        ],
        purposeId: [
          { required: true, message: "用途id(字典)不能为空", trigger: "blur" }
        ],
        area: [
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
            required: true, message: "建筑面积不能为空,并且必须是数字，保留两位小数", trigger: "blur"
          }
        ],
        userArea: [
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
            required: true, message: "使用面积不能为空,并且必须是数字，保留两位小数", trigger: "blur"
          }
        ],
      },
      // 楼宇数据
      buildingOptions:[
        { label: "一号楼", value: 1},
        { label: "二号楼", value: 2}
      ],
      // 单元数据
      unitOptions: [
        { label: "一单元", value: 1},
        { label: "二单元", value: 2},
      ],
      // 楼层数据
      floorOptions: [
        { label: "一楼", value: 1},
        { label: "二楼", value: 2}
      ]
    }
  },
  mounted() {
    buildingList(this.queryParams).then(res => {
      this.buildingOptions = res.rows
      // console.log(this.buildingOptions)
    })
    unitList(this.queryParams).then(res => {
      this.unitOptions = res.rows
      // console.log(this.unitOptions)
    })
    floorsList().then(res => {
      this.floorOptions = res.rows
      // console.log(this.floorOptions)
    })
  },
  computed:{
    nowUnitsOptions() {
      return this.unitOptions.filter(item =>
        this.form.buildingId === item.buildingId
      )
    },
    nowFloorOptions(){
      return this.floorOptions.filter(p =>
        this.form.unitId === p.unitId
      )
    }
  },
  watch:{
    visible(n){
      this.addVisible = n
    }
  },
  methods:{
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRooms(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("update:visible", false)
              this.getList();
            });
          } else {
            addRooms(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("update:visible", false)
              this.getList();
            });
          }
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:visible", false)
      this.reset();
    },
  }
}
</script>
